<template>
  <div class='list' ref='wrapper'>
    <div>
      <div class='area'>
        <div class='title border-topbottom'>您的位置</div>
        <div class='button-list'>
           <div class='button-wrapper'> 
            <div class='button'>{{this.currentcity}}</div>
          </div>
        </div>
      </div>
      <div class='area'>
        <div class='title border-topbottom'>热门城市</div>
        <div class='button-list'>
          <div class='button-wrapper' 
            v-for='item of hot' 
            :key='item.id'
            @click='handelcityclick(item.name)'> 
            <div class='button'>{{item.name}}</div>
          </div>
        </div>
      </div>
      <div class='area' v-for='(item , key) of city' :key='key' :ref='key'>
        <div class='title border-topbottom'>{{key}}</div>
        <div class='item-list'>
          <div 
            class='item border-bottom'  
            v-for='inneritem of item' 
            :key='inneritem.id'
            @click='handelcityclick(inneritem.name)'
          >
            {{inneritem.name}}
          </div>
        </div>
      </div> 
      
    </div>
  </div>
</template>

<script> 
import BScroll from 'better-scroll'
import {mapState,mapMutations} from 'vuex'
export default {
  name:'citylist',
  props:{
    hot:Array,
    city:Object,
    letter:String 
  },
  computed:{
    ...mapState({
      currentcity:'city'
      //mapState可以传递数组和对象，该对象是把vuex共用数据city映射到该组件的计算属性里，映射过来的名字是currencity，
      //替代$store.state.city
    })
  },
  methods:{
    handelcityclick(city){
      this.changemutationcity(city)
      //this.$store.commit('changemutationcity',city)
      this.$router.push('/')//编程式导航
    },
    ...mapMutations(['changemutationcity'])
  }, 
  mounted(){
    this.scroll = new BScroll(this.$refs.wrapper)//利用$refs来操作dom
  }, 
  watch:{
    letter(){
      if(this.letter){
        const element=this.$refs[this.letter][0]//this.$refs[this.letter]是一个数组
        this.scroll.scrollToElement(element)  //better-scroll提供的方法：点击字母时列表移动
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  
  .border-topbottom
    &:before  //stylus中的&符号，表示同级元素，即和&同一列样式的所有者
       border-color:#ccc
    &:after
       border-color:#ccc
  .border-bottom 
    &:before  //stylus中的&符号，表示同级元素，即和&同一列样式的所有者
      border-color:#ccc
  .list
    overflow:hidden
    position:absolute 
    top:1.58rem 
    left:0
    right:0
    bottom:0
    .title
      line-height:.54rem 
      background:#eee  
      padding-left:.2rem 
      color:#666
      font-size:.26rem 
    .button-list
      overflow:hidden
      padding:.1rem .6rem .1rem .1rem
      .button-wrapper
        float:left//浮动的元素是不会被父级计算高度，脱离文档流，父元素坍塌
        width:33.33%
        .button
          margin:.1rem
          text-align:center
          padding:.1rem 
          border:.02rem solid #ccc 
          border-radius:.06rem
    .item-list
      .item
        line-height:.76rem 
        padding-left:.2rem
</style>
